import  {
  Loginpage,
  Notfound,
  // TodoList,
  Xiao
} from "../views"   //引入页面
import React from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import './index.css'
import Video from '../views/multiRoutes/video'
import WorkPlace from '../views/multiRoutes/workplace'
import FirstPage from '../views/multiRoutes/firstpage'


// /login 页面    /404  页面  
export const mainRoute = [
  {
      pathname:"/loginpage",
      component:Loginpage
  },
  {
      pathname:"/404",
      component:Notfound
  }
]

// /admin/XXX   dashboard article articleEdit settings  管理页面
export const admainRoute = [
  {
      pathname:"/admin/xiao",
      component:Xiao
  },
  // {
  //     pathname:"/admin/article",
  //     component:Article,
  //     exact:true  //配置App内置路由需要exact属性,详情见下文  首页需要精准匹配  精准匹配就不能有分路由
  // },
  // {
  //     pathname:"/admin/article/edit/:id",
  //     component:ArticleEdit
  // },
  // {
  //     pathname:"/admin/settings",
  //     component:Settings
  // },
]

function AppRouter() {
  // 模拟后台请求到的路由 实现动态路由
  let routeConfig =[
    { path:'/firstpage/', title:'博客首页', exact:false, component:FirstPage },
    { path:'/video/', title:'视频教程', exact:false, component:Video },
    { path:'/workplace/', title:'职场技能', exact:false, component:WorkPlace }
  ]
  return (
    <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                        routeConfig.map((item,index)=>{
                            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                        })
                    }
                </ul>
                {/* <ul>         这里改为模拟 从上面取的数据循环出Link区域
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="/workplace/">职场技能</Link> </li>
                </ul> */}
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }
                {/* <Route path="/"  exact component={TodoList} />  这里路由配置同样改为模拟 从上面取的数据循环出路由配置
                <Route path="/video/"   component={Video} />
                <Route path="/workplace/"   component={WorkPlace} /> */}
            </div>
          </div>
    </Router>
    // <Router>
    //     <ul>
    //         <li> <Link to="/">首页</Link> </li>
    //         <li><Link to="/list/HHHHHHHHHH">骁骑兵</Link> </li>
    //     </ul>
    //     <Route path="/" exact component={TodoList} />
    //     <Route path="/list/:id" component={Xiao} />
    //     <Route path="/404/" component={Notfound} />
    // </Router>
  );
}
export default AppRouter;